class Lunbo{
	//Uncaught SyntaxError: Unexpected token (
	//类名后面不要括号()
	constructor(className,configObj){
		this.el = document.querySelector(className)
		this.configObj=configObj
		this.rightBtn = this.el.querySelector(".next")
		this.rightBtn.style.display='block';
		this.oLis=this.el.querySelectorAll('.scroll img')
		this.pageLIs = this.el.querySelectorAll(".btn span")
		this.pageNum = 0
		this.init()
	}
	btnEvent(){
		this.rightBtn.onclick = ()=>{
			console.log("正在进行单击事件")
			//oLis[pageNum].style.opacity=0;
			console.log(this.oLis[this.pageNum])
			$(this.oLis[this.pageNum]).animate({opacity: 0})
			this.pageNum++
			if(this.pageNum == 8) {
				this.pageNum = 0
			}
			//oLis[pageNum].style.opacity=1
//			animate(this.oLis[this.pageNum], {
//				opacity: 1
//			})
			$(this.oLis[this.pageNum]).animate({opacity: 1})
			this.pagePoint(this.pageNum)
			console.log(this.pageNum,this.oLis[this.pageNum])
		}

		var leftBtn = this.el.querySelector(".banner .prev")
		 leftBtn.style.display='block'
		 leftBtn.onclick = ()=>{
			//oLis[pageNum].style.opacity=0;
//			this.oLis[this.pageNum]
//			animate(this.oLis[this.pageNum], {
//				opacity: 0
//			})
			$(this.oLis[this.pageNum]).animate({opacity:0})
			this.pageNum--
			if(this.pageNum == -1) {
				this.pageNum = 7
			}
			//oLis[pageNum].style.opacity=1
//			animate(this.oLis[this.pageNum], {
//				opacity: 1
//			})
		$(this.oLis[this.pageNum]).animate({opacity: 1})
			this.pagePoint(this.pageNum)
			console.log(this.pageNum,this.oLis[this.pageNum])
		}

	}

	autoPlay() {
		var autotimer = setInterval(()=>{
			this.rightBtn.onclick()

		}, 2000)

		
		this.el.onmouseenter = function() {
			clearInterval(autotimer)
		}
		this.el.onmouseleave = ()=> {
			autotimer = setInterval(()=> {
				this.rightBtn.onclick()

			}, 2000)
		}
	}

	pageLisEvent() {
		for(let i = 0; i < this.pageLIs.length; i++) {
			this.pageLIs[i].onclick = function() {
				console.log(this.pageLIs[i])
				 this.pagePoint(i)
				$(this.oLis[this.pageNum]).animate({opacity: 0})
				this.pageNum = i
				$(this.oLis[this.pageNum]).animate({opacity: 1})
			}.bind(this)
		}
	}

	pagePoint(i) {
			
		for(let i = 0; i < this.pageLIs.length; i++) {
			this.pageLIs[i].style.background = "red"
//			console.log(this.pageLIs[i])
		}
		 	this.pageLIs[i].style.background = "white"
//			console.log(this.pageLIs[i])
	}
	init(){
		this.pagePoint(this.pageNum)
		this.btnEvent()
		this.pageLisEvent()
		if(this.configObj.autoplay==true){
			this.autoPlay()
		}else{
			
		}
	}

}